Coffee School
Code Editor
// Creating environment variables
var playerSize = 10;
var sceneWidth = 300, sceneHeight = 150;
var groundHeight = 10;
var playAreaHeight = (sceneHeight - groundHeight);
// Create the variables to track player movement
var playerVel = 0; // Stores the player's velocity
var g = 0.4; // The constant acceleration cause by "gravity"
// Create the ground!
Crafty.e("Solid, 2D, DOM, Color")
.attr({x: 0,
y: playAreaHeight,
w: sceneWidth,
h: groundHeight})
.color("#00ff00");
// Create our player's base entity
Crafty.e("2D, DOM, Color") // Specifying the components to add
.attr({x: 30, y: 30, w: playerSize, h: playerSize}) // Specifying the dimensions and the point to draw from
.color("#ff0000") // Specifying the colour of the rectangle
.bind("EnterFrame", function() { // Binds the "EnterFrame" event to the entity
if(this.y < 0) {
playerVel = g; // Prevent the player from going above the game screen
}
else {
playerVel += g; // Adds the "gravitational acceleration" to the player's velocity
}
this.y += playerVel; // Change the player entities y position based on the player velocity
})
.bind("KeyDown", function(event) { // Binds the "KeyDown" event to our player entity
if(event.key == Crafty.keys.SPACE){ // If the key is the spacebar then "flap"
playerVel = -5; // Sets the player's speed and direction to go upwards
}
});
Preview
Console Log:
Part 2: Making Moving Obstacles
Time estimate for Part 2: 15 minutes
Now that we’ve created our ground we can now start to write our code to generate the obstacles that the player must pass through to continue playing the game. Because we’re going to want to generate our obstacles a large number of times (potentially an infinite number of times) it’s a good idea to write a function to do that!
We’ll want to call our function during the game loop if a certain condition is met (we want to make sure its okay to generate a new object so our game is fun and not frustrating!). However before we can worry about when to generate our object we need to write the function to generate an object first.